import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import creditStore from "../creditStore";
import MainLayout from "@/component/mainLayout/mainLayout";
import yhTools from "@/tools/yh";
import { InterfaceG } from "@/config/Config";
import Form from "./components/form";
import verCode from "@/component/verCode";
import { getSupportedBankList } from "@redux/Action/bank/bank";
import "./index.scss";
// agreementoflianyintong
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const day = new Date().getDate();

const AddBank = props => {
	const [values, setValues] = useState({});
	const [disabled, setDisabled] = useState(false);
	const { sendCode } = props.verCode;
	const { productNum, isHiddenBotton } = props;
	const xhdQueryBindingCard = async () => {
		let objs = {
			url: InterfaceG.xhdCreditApplyingQueryBindingCard,
			params: {
				productNum
			}
		};
		try {
			Toast.loading("加载中...");
			const { code, data } = await yhTools.request(objs);
			if (code === "0" && data) {
				setValues(data);
				setDisabled(!!data.accountNo);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};
	useEffect(() => {
		xhdQueryBindingCard();
		props._getSupportedBankList({ channelCode: "ll" });
	}, []);
	// 查询

	//获取验证码
	const getCode = async values => {
		props.trim(values);
		let objs = {
			url: InterfaceG.xhdSendBindCardVerifyCode,
			params: {
				...values,
				productNum
			}
		};
		try {
			Toast.loading();
			const { code, message } = await yhTools.request(objs);
			if (code == "0") {
				sendCode();
			} else {
				Toast.info(message, 2);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};

	//保存银行卡
	const submit = async values => {
		props.trim(values);
		if (disabled) {
			return props.goNext();
		}
		let objs = {
			url: InterfaceG.xhdCreditApplyingBindCard,
			params: {
				...values,
				productNum
			}
		};
		Toast.loading("加载中...");
		try {
			const { code, message } = await yhTools.request(objs);
			if (code == "0") {
				Toast.hide();
				props.goNext();
			} else {
				Toast.info(message, 2);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};
	//获取ocr银行卡
	const getOcrBank = path => {
		const imageData = {
			name: "bankImg.jpeg",
			path,
			params: {}
		};
		const objs = {
			url: InterfaceG.orcBank,
			imageArray: [imageData]
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			props.trim(res.data);
			if (res.code === "0") {
				setValues({
					...values,
					accountNo: res.data.cardNumber
				});
			} else {
				Toast.info(res.message, 2);
			}
		}, Toast.hide);
	};
	//选择图片
	const chooseImage = () => {
		//打开原生获取图片
		let imgPicker = {
			type: "3", //相机和相册
			imageName: "_card_" + ".png",
			imageSize: 100 * 1024 + "", // 100kb,自定义
			thumbnailSize: 100 * 1024 + "" // 100kb,自定义
		};

		yhTools.chooseImage(imgPicker).then(resp => {
			getOcrBank(resp.data.path);
		});
	};
	//ocr
	const ocrHandle = () => {
		chooseImage();
	};

	//查看协议
	const goProtocol = () => {
		const commonParams = {
			personName: values.userName,
			idCardCode: values.idNo,
			year,
			month,
			day
		};
		props.history.push({
			pathname: "/agreementoflianyintong",
			params: commonParams
		});
	};
	const headerParams = {
		header: {
			title: "添加银行卡"
		},
		isModal: true,
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	return (
		<MainLayout pageParams={headerParams} handleBack={props.handleBack}>
			<div className="addBank-wrapper">
				<Form
					getCode={getCode}
					values={values}
					submit={submit}
					ocrHandle={ocrHandle}
					goProtocol={goProtocol}
					verCode={props.verCode}
					disabled={disabled}
					isHiddenBotton={isHiddenBotton}
					supportedBankList={props.bankReducer.supportedBankList}
				/>
			</div>
		</MainLayout>
	);
};
const mapStateToProps = state => state;

const mapDispatchToProps = dispatch => {
	return {
		_getSupportedBankList: options => {
			//获取设备信息
			dispatch(getSupportedBankList(options));
		}
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(verCode()(creditStore(AddBank)));
